<template>
  <view class="container">
    <!-- 顶部用户信息 -->
    <view class="user-header">
      <view class="user-info">
        <image class="avatar" src="../../static/images/tx.png" mode="aspectFill" />
        <view class="user-detail">
          <text class="username">{{ userInfo.username }}</text>
          <text class="vip">{{ userInfo.phone_num }}</text>
        </view>
      </view>
      <uni-icons
        type="gear"
        size="30"
        color="#fff"
        class="settings-icon"
        @click="navigateTo('/pages/settings/index')"
      />
    </view>

    <!-- 功能卡片 -->
    <view class="card">
      <!-- 功能列表 -->
      <view class="menu-list">
        <view
          v-for="(item, index) in menuItems"
          :key="item.title"
          class="menu-item"
          @click="navigateTo(item.path)"
        >
          <view class="menu-left">
            <uni-icons :type="item.icon" size="20" :color="item.color" />
            <text class="menu-text">{{ item.title }}</text>
          </view>
          <uni-icons v-if="!item.value" type="right" size="16" color="#999" />
          <text style="color: #999; font-size: 14px" v-else>{{ item.key }}</text>
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-btn" @click="handleLogout">
      <text>退出登录</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getPerInfo } from '@/services/my'
import { useMemberStore } from '@/stores'

// 功能菜单数据
const menuItems = reactive([
  {
    title: '有效期',
    icon: 'calendar',
    color: '#99CCCC',
    value: 'expire_time',
    key: '',
  },
  { title: '客服中心', icon: 'headphones', color: '#69db7c', path: '/pages/service' },
  { title: '系统设置', icon: 'gear', color: '#ff922b', path: '/pages/settings' },
])

// 导航方法
const navigateTo = (path) => {
  uni.navigateTo({ url: path })
}

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success(res) {
      if (res.confirm) {
        // 执行退出登录逻辑
        uni.showToast({ title: '已退出登录', icon: 'success' })
        // 跳转到首页
        uni.reLaunch({
          url: '/pages/login/login',
        })
        // 3. 清除状态管理数据
        const memberStore = useMemberStore()
        memberStore.clearProfile()
      }
    },
  })
}
// 用户信息
const userInfo = ref({
  // avatar: '/static/images/logo_icon.png', // 默认头像路径
  username: '',
  phone_num: '',
  usercode: '',
})
onMounted(() => {
  getData()
})
const getData = async () => {
  const res = await getPerInfo()
  userInfo.value = res.data || []
  menuItems.map((item) => {
    if (item.value == 'expire_time') {
      item.key = res.data[item.value]
    }
  })
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.user-header {
  background: linear-gradient(135deg, #4dabf7, #1864ab);
  padding: 40rpx 30rpx 100rpx;
  position: relative;

  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 3rpx solid #fff;
    }

    .user-detail {
      margin-left: 30rpx;

      .username {
        display: block;
        color: #fff;
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .vip {
        color: #ffe066;
        font-size: 24rpx;
      }
    }
  }

  .settings-icon {
    position: absolute;
    right: 30rpx;
    top: 60rpx;
  }
}

.card {
  background: #fff;
  border-radius: 20rpx;
  margin: 15rpx 30rpx 30rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.order-status {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;

  .order-item {
    position: relative;
    text-align: center;

    .order-text {
      display: block;
      font-size: 26rpx;
      color: #666;
      margin-top: 15rpx;
    }

    .order-badge {
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      background: #ff6b6b;
      color: #fff;
      font-size: 20rpx;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
    }
  }
}

.menu-list {
  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .menu-left {
      display: flex;
      align-items: center;

      .menu-text {
        margin-left: 20rpx;
        font-size: 30rpx;
        color: #333;
      }
    }
  }
}

.logout-btn {
  margin: 40rpx 30rpx;
  background: #fff;
  text-align: center;
  padding: 25rpx;
  border-radius: 12rpx;
  color: #ff6b6b;
  font-size: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
</style>
